<template>
	<view class="page">
		<!-- 头像 start -->
		<view class="head">
			<image :src="userInfo.faceImage" mode="" class="img" style="width: 60px;height: 60px;"></image>
		</view>
		<!-- 头像 end -->
		
		<!-- 顶部文字 start -->
		<view class="head" style="margin-top: 0px;">
			<view class="one">
				Hi，{{userInfo.nickname}}
			</view>
			<view class="">
				欢迎加入道友
			</view>
			<view class="tow">
				选择性别，有助于匹配圈子和道友
			</view>
		</view>
		<!-- 顶部文字 end -->
		
		<!-- 用户信息 start -->
		<view class="meminfo">
			<image src="http://49.232.14.51:9000/friend/man.jpg" mode="" style="width: 200upx;height: 200upx;" @click="setSex(1)" :class="userInfo.sex == 1 ? 'red' : 'green'"></image>
			<image src="http://49.232.14.51:9000/friend/woman.jpg" mode="" style="width: 200upx;height: 200upx;" @click="setSex(2)" :class="userInfo.sex == 2 ? 'red' : 'green'"></image>
		</view>
		<!-- 用户信息 end -->
		
		<button class="next" @tap="saveNext" :disabled="disNext">下一步</button>
	</view>
</template>

<script>
	
	import mpvueCityPicker from '../../../components/mpvue-citypicker/mpvueCityPicker.vue';
	import sexCompo from '../../../components/sex-compo/sex-compo.vue'
	
	export default {
		data() {
			return {
				userInfo: {
					nickname: '',
					birthday: '',
					faceImage: '',
					address: '',
					education: '',
					sex: 0
				},
				cityPickerValueDefault: [0, 0, 1],
				themeColor: '#007AFF',
				index: 0,
				eduArr: [],
				educationStr: ''
			}
		},
		onLoad() {
			this.ifLogin();
			this.getEduArr();
		},
		computed: {
			disNext(){
				if(this.userInfo.sex == null || this.userInfo.sex < 1){
					return true;
				}
				return false;
			}
		},
		methods: {
			showSexCompo(){
				this.$refs.sex.show();
			},
			chooseSex(e){
				this.userInfo.sex = e;
			},
			operator() {
				var me = this;
				var globalUser = me.getGlobalUser("globalUser");
				uni.showActionSheet({
					itemList: ["查看我的头像", "从相册选择上传"],
					success(res) {
						var index = res.tapIndex;
						if (index == 0) {
							// 预览头像
							var faceArr = [];
							faceArr.push(globalUser.faceImage);
							uni.previewImage({
								urls: faceArr,
								current: faceArr[0]
							})
						} else if (index == 1) {
							// 选择上传头像
							uni.chooseImage({
								count: 1,
								sizeType: ["compressed"],
								sourceType: ["album"],
								success: (res) => {
									// 获得临时路径
									me.userInfo.faceImage = res.tempFilePaths[0];
								}
							})
							
						}
					}
				})
			},
			saveNext(){
				this.$apis.saveHonors({id: this.userInfo.id, sex: this.userInfo.sex}).then((res) => {
					this.userInfo = res;
					uni.setStorageSync("globalUser",this.userInfo)
					uni.navigateTo({
						url: "../honor/honor"
					});
				});
			},
			setSex(e){
				this.userInfo.sex = e;
			},
			eduChange(e){
				this.userInfo.education = this.eduArr[e.target.value].id
				this.educationStr = this.eduArr[e.target.value].value
			},
			getEduArr(){
				this.$apis.getDictByType({type: 2, parentId: 0}).then((res) => {
					var eduArr = res;
					this.eduArr = eduArr;
					for (var i = 0; i < eduArr.length; i++) {
						if(this.eduArr[i].id == this.userInfo.education){
							this.educationStr = this.eduArr[i].value;
						}
					}
				});
			},
			// 日期选择
			dateChange(e) {
				this.userInfo.birthday = e.detail.value;
			},
			// 三级联动选择
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show();
			},
			modifyInfo(title, info){
				this.promptTitle = title;
				this.infoType = info;
				this.showPrompt();
			},
			onCancel(e) {
				console.log(e);
			},
			onConfirm(e) {
				this.pickerText = JSON.stringify(e);
				this.userInfo.address = e.label;
			},
			ifLogin(){
				var userInfo = this.getGlobalUser("globalUser");
				if(userInfo == null || userInfo == undefined || userInfo == ''){
					this.$apis.ifLogin({type: 1, parentId: 0}).then((res) => {
						var userInfo = res;
						uni.setStorageSync("globalUser", userInfo);
						this.userInfo = userInfo;
					});
				}else {
					this.userInfo = userInfo;
				}
			}
		},
		components: {
			mpvueCityPicker,
			sexCompo
		}
	}
</script>

<style>
	@import url("memInfo.css");
	@import url("../../../static/iconfont/iconfont.css");
</style>